<template>
	<view class="active">
		<view class="fixed-top">
			<view class="top-content">
				<view class="nav-bar">
					<view class="nav-bar-sider">
						<u-icon name="arrow-left" @click="back"></u-icon>
					</view>
					<view style="flex: 1">
						活动管理
					</view>
					<view class="nav-bar-sider"></view>
				</view>
				<view class="total u-flex u-row-around">
					<view class="u-flex-1">
						<view>总活动</view>
						<view class="mar-top-20">{{orderSumDTO.sumActualPayAmount || 0}}</view>
					</view>
					<view class="u-flex-1">
						<view>进行中</view>
						<view class="mar-top-20">{{orderSumDTO.sumTotalAmount || 0}}</view>
					</view>
					<view class="u-flex-1">
						<view>已结束</view>
						<view class="mar-top-20">{{orderSumDTO.sumActualPaySweet || 0}}</view>
					</view>
				</view>
				<view class="top">
					<u-search 
						placeholder="搜索活动名称"
						v-model="searchFrom.activityName"
						:show-action="true"
						:action-style="searchRightStyle"
						@search="onSearch"
						@custom="onSearch"></u-search>
					<view class="filter" @click="show = true">{{searchFrom.state === '' ? '活动状态' : states[searchFrom.state]}}<u-icon name="arrow-down-fill" style="padding-left: 5rpx;"></u-icon></view>
				</view>
			</view>
		</view>
		
		<view class="list">
			<view class="list-item" v-for="(item, index) in tableData" :key="index">
				<view class="list-item-cell">
					<view class="font-28 primary">{{item.activityName}}</view>
					<view class="primary-deep">{{states[item.state]}}</view>
				</view>
				<view class="list-item-cell">
					<view>红包数量：{{item.redEnvelopesNum}}</view>
					<view>红包糖果总数：{{item.sweetNum}}</view>
				</view>
				<view class="list-item-cell">
					<view>红包类型：平均</view>
					<view>纬度：	{{item.latitude}}</view>
				</view>
				<view class="list-item-cell">
					<view>经度：{{item.longitude}}</view>
				</view>
				<view class="list-item-cell">
					<view>到期时间：{{item.expireDate}}</view>
				</view>
				<view class="u-flex u-row-right" style="margin-bottom: 17rpx;margin-top: 17rpx;">
					<u-button :custom-style="customStyle" shape="circle" size="mini" @click="toDetail(item)">领取详情</u-button>
					<u-button v-if="item.state == 0" style="background-color: #fff  !important;margin-left: 10rpx;margin-right:initial" type="error" shape="circle" size="mini" @click="cancel(item)" plain>取消活动</u-button>
				</view>
			</view>
		</view>
		<u-select v-model="show" :list="list" @confirm="confirm" style="font-size: 28rpx;"></u-select>
		<u-loadmore :status="status" />
		<u-toast ref="uToast" />
		<u-modal v-model="showCancel" content="请确认是否要取消活动" @confirm="cancelAction"></u-modal>
	</view>
</template>

<script>
	let base = 'mall-merchant';
	export default{
		data(){
			return {
				orderSumDTO: {},
				keyword: '',
				status: 'loadmore',
				show: false,
				showCancel: false,
				states: {
					0: '进行中',
					1: '已结束',
					2: '已取消',
				},
				list: [
					{
						value: '',
						label: '活动状态'
					},
					{
						value: 0,
						label: '进行中'
					},
					{
						value: 1,
						label: '已结束'
					},
					{
						value: 2,
						label: '已取消'
					},
					
				],
				searchFrom: {
					activityName: '',
					state: '',
					page: 1,
					size: 10,
				},
				total: 0,
				tableData: [],
				searchRightStyle: {
					'position': 'absolute',
					'right': '10rpx',
					'line-height': '55rpx',
					'width': '100rpx',
					'background-color': '#357CD4',
					'color': '#fff',
					'border-radius': '28rpx',
					
				},
				inputStyle: {
					'position': 'relative'
				},
				customStyle: {
					'background-color': '#fff !important',
					'color': '#357CD4 !important',
					'border-color':' #357CD4 !important',
					'display': 'block',
					'margin': 'initial'
				},
				isFullScreen: false,
				
			}
		},
		onLoad(option) {
			// this.searchFrom.businessId = uni.getStorageSync('mid');
			this.getData();
		},
		methods:{
			back() {
				uni.navigateBack({
				    delta: 1
				});
			},
			toDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: `./detail?id=${item.id}`
				})
			},
			confirm(e) {
				console.log(e)
				this.searchFrom.state = e[0].value;
				this.searchFrom.page = 1;
				this.tableData = [];
				this.getData();
			},
			onSearch(e) {
				this.searchFrom.activityName = e;
				this.searchFrom.page = 1;
				this.tableData = []
				this.getData();
			},
			getData() {
				this.searchFrom.businessId = uni.getStorageSync('mid');
				this.$u.api.getActivityList(this.searchFrom).then(res=>{
					if(res.code == 0){
						if (res.data.length > 0) {
							this.tableData = [...this.tableData, ...res.data];
						} else {
							// 分页结束
							this.status = 'nomore';
						}
						if (this.tableData.length  >= this.total) {
							this.status = 'nomore';
						}
						this.total = res.dextraInfo;
					}else{
						uni.showToast({
							icon:'none',
						    title: res.msg
						});
					}
				})
			},
			cancel (item) {
				this.showCancel = true;
				
			},
			cancelAction() {
				this.$u.api.putActivityCancel(this.searchFrom).then(res=>{
					if(res.code == 0){
						if (res.data.length > 0) {
							this.tableData = [...this.tableData, ...res.data];
						} else {
							// 分页结束
							this.status = 'nomore';
						}
						if (this.tableData.length  >= this.total) {
							this.status = 'nomore';
						}
						this.total = res.dextraInfo;
					}else{
						uni.showToast({
							icon:'none',
						    title: res.msg
						});
					}
				})
			},
			
		},
		// 上拉加载
		onReachBottom() {
			if(this.tableData.length >= this.total) return ;
			this.status = 'loading';
			this.searchFrom.page = ++ this.searchFrom.page;
			setTimeout(() => {
				this.getData()
				if(this.tableData.length >= this.total) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		// onPullDownRefresh() {
		// 	this.searchFrom.page = 1;
		// 	this.tableData = [];
		// 	this.getData();
		// },
	}
</script>

<style scoped>
	.active {
		border: 0;
		font-size: 24rpx;
		/* padding-top: var(--status-bar-height); */
	}
	/* .bar {
		height: var(--status-bar-height);
		background-color: #3189EA;
	} */
	.top-content {
		padding-top: var(--status-bar-height);
		width: 100%;
		position: relative;
		color: #fff;
		/* width: 100%;
		height: 334rpx; */
		background-color: #1F6ECF;
		background-image: url('@/static/order/bg-order.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	.total{
		margin: 50rpx 0;
		text-align: center;
	}
	/* .top-bg {
		padding-top: 25rpx;
		width: 100%;
		height: 291rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		background-image: url('../../static/active/bg.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	} */
	.top {
		display: flex;
		align-items: center;
		padding: 15rpx 15rpx 15rpx 32rpx;
		background-color: #77A9FD;
	}
	.u-search {
		position: relative;
	}
	.filter {
		color: #FFFFFF;
		font-size: 26rpx;
		padding-left: 30rpx 
	}
	.list {
		padding: 30rpx;
	}
	.list-item {
		box-sizing: border-box;
		padding: 2rpx 30rpx;
		border: 1rpx solid #E6E6E6;
		border-radius: 11rpx;
	}
	.list-item-cell {
		margin-top: 17rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.primary {
		color: #77A9FD;
	}
	.primary-deep {
		color: #357CD4;
	}
	.font-28 {
		font-size: 28rpx;
	}
	.nav-bar {
		width: 100%;
		font-size: 32rpx;
		color: #fff;
		line-height: 88rpx;
		text-align: center;
		display: flex;
		align-items: center;
	}
	.nav-bar-sider {
		width: 100rpx;
	}
</style>
